<template>
<div>
  <h3>测试只带get方法的计算属性</h3>
  <p>数量：{{count}}</p>
  <p>姓名：{{person.name}}</p>
  <p>信息（get方法计算属性）：{{info}}</p>
  <button @click="update">更新</button>
  <h3>测试带get和set方法的计算属性</h3>
  <input type="text" v-model="doubleCount"/>
</div>
</template>
<script setup>
import {ref,reactive,computed} from "vue"
const count=ref(0)
const person=reactive({
	name:"张三"
})
const info=computed(()=>{
	return `${person.name}完成的数量${count.value}`
})
const doubleCount=computed({
	get(){
		return count.value*2
	},
	set(value){
		count.value=value/2
	}
})
const update=()=>{
	count.value+=1
	person.name+='--'
}
</script>